<%--
  Created by IntelliJ IDEA.
  User: zhongjieyu
  Date: 2014/10/29
  Time: 10:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<html>
<head>
    <title>精选项目分类-首页</title>

    <script type="text/javascript" src="${path}/js/jquery-2.1.1.js"></script>

    <style type="text/css">
        .spanClass{
            background-color: #000000;
            color: honeydew;

        }
        .floatDiv{
            width: 200px;
            height: 200px;
            position:absolute;
            border: 1px solid #A9E4E9;
            display: none;
            background-color: #DAF3F5;

        }



        div span{
            margin-left: 10px;
            cursor: pointer;
        }

    </style>
    <script type="text/javascript">

        $(function(){

            f_initQueryData();

            //初始化绑定span事件
            f_spanClick("#commissionDiv span","#budgetRegion");
            f_spanClick("#demandTimeDiv span","#durplusDay");
            f_spanClick("#clientTypeDiv span","#clientType");
            f_spanClick("#demandAddsDiv span","#demandAdds");
            f_spanClick("#currentStateDiv span","#currentProgress");

            f_findTaskInfo(10,1);


            $("#likeQuery").click(function(){
                f_findTaskInfo(10,1);
            });

            $("#orderTable td").click(function(){


                if($(this).html().indexOf("搜索") > 0){

                    return;
                }
                if($(this).html().indexOf("图片模式") > 0){
                    return;
                }
                if($(this).html().indexOf("列表模式") > 0){
                    return;
                }

                console.log($(this).html().indexOf("搜索"));

                $("#orderTable td").removeClass("spanClass");

                $(this).addClass("spanClass");

                $("#orderBy").val($(this).attr("value"));
            });
        });

        /**初始化查询数据*/
        function f_initQueryData(){

            f_findPajectType("1",1);
        }

        /**查询项目分类*/
        function f_findPajectType(parent,level){


            $.post("${path}/taskList/findTaskTypeByParent.html", { parent: parent},
                    function(data, textStatus){

                        if(level == 1){

                            var html = "<span value='' class='spanClass'>全部</span>";

                            for(i in data){

                                var type = data[i];


                                html += "<span value='"+type.id+"'>"+type.name+"</span>";

                                if(i == 6){
                                    html += "<br/>";
                                }


                            }

                            if(data.length > 7){

                                $("#moreProjectDiv").show();
                            }else{
                                $("#moreProjectDiv").hide();
                            }

                            $("#projectTypeDiv").html(html);

                            //绑定事件
                            f_projectType("#projectTypeDiv span");
                        }else{




                            var html = "<span value='' class='spanClass'>全部</span>";

                            for(i in data){

                                var type = data[i];



                                html += "<span value='"+type.id+"'>"+type.name+"</span>";

                            }

                            html += "<br/><button style='position: absolute; margin-left: 150px;margin-top: 140px;' onclick='f_closeFloat()'>确定</button>";

                            $(".floatDiv").html(html);
                            f_spanClick(".floatDiv span");


                            //绑定双击事件
                            $(".floatDiv span").dblclick(f_closeFloat);

                            var value = $("#second_class").val();

                            $(".floatDiv span").each(function(i){

                                if($(this).attr("value") == value){

                                    $(".floatDiv span").removeClass("spanClass");

                                    $(this).addClass("spanClass");
                                }

                            });
                        }
                    });
        }

        //关闭弹出窗口
        function f_closeFloat(){

            var value1 = $("#projectTypeDiv .spanClass").attr("value");
            var value2 = $(".floatDiv .spanClass").attr("value");

            $("#first_class").val(value1);
            $("#second_class").val(value2);

            $(".floatDiv").hide();
        }

        var moreBoo = true;
        function f_moreProjectType(obj){

            if(moreBoo){
                $("#projectDiv").css("height","23%");
                $("#projectTypeDiv").css("height","100%");

                $("#moreProjectA").text("收起《");
                moreBoo = false;
            }else{
                $("#projectDiv").css("height","16%");
                $("#projectTypeDiv").css("height","65%");

                $("#moreProjectA").text("更多》");
                moreBoo = true;

            }

        }

        /**项目分类span点击事件 传入选择器*/
        function f_projectType(selID){



            $(selID).click(function(e) {
                $(selID).removeClass("spanClass");

                $(this).addClass("spanClass");

                var x = getX(e);
                var y = getY(e) + 5;



                f_findPajectType($(this).attr("value"));

                $(".floatDiv").show();

                $(".floatDiv").css("top",y);
                $(".floatDiv").css("left",x);



            });

        }

        function getX(e) {
            e = e || window.event;

            return e.pageX || e.clientX + document.body.scroolLeft;
        }

        function getY(e) {
            e = e|| window.event;
            return e.pageY || e.clientY + document.boyd.scrollTop;
        }

        /**span点击事件 传入选择器*/
        function f_spanClick(selID,inputID){



            $(selID).click(function() {
                $(selID).removeClass("spanClass");

                $(this).addClass("spanClass");

                if(inputID != null && inputID != undefined){

                    $(inputID).val($(this).attr("value"));
                }


            });

        }

        function f_changeType(){
            f_findTaskInfo(10,1);

            if($("#imgTypeSpan").html() == "图片模式"){


                $("#imgTypeSpan").html("列表模式");

            }else{

                $("#imgTypeSpan").html("图片模式");
            }
        }

        /**查询任务信息*/
        function f_findTaskInfo( rows, page){

            /***设置查询数据*/
            var first_class = $("#first_class").val();//一级分类
            var second_class = $("#second_class").val();//二级分类
            var budgetRegion = $("#budgetRegion").val();//佣金
            var durplusDay = $("#durplusDay").val();//截止日期
            var currentProgress = $("#currentProgress").val();//当前状态
            var title = $("#title").val();//标题

            var orderBy = $("#orderBy").val();//排序

            var param = {rows:rows, page:page, first_class:first_class,second_class:second_class,budgetRegion:budgetRegion,
                durplusDay:durplusDay,item_status:currentProgress,title:title,orderBy:orderBy
            };



            $.ajax({
                type: "POST",
                url: "${path}/taskList/findTaskInfo.html",
                data: param,
                dataType: "json",
                success: function(data){
                   console.log(data);

                    var html = "";


                    if($("#imgTypeSpan").html() == "图片模式"){

                        html = f_getTableStyle(data);

                    }else{

                        html = f_getImgStyle(data);
                    }





                    $("#dataDiv").html(html);

                }
            });
        }

        /**
        * 列表模式
        * @param tackInfo
        * @returns {string}
         */
    function f_getTableStyle(data){
            var html = "";

            for(var i in data.list) {

                var tackInfo = data.list[i];

                if (tackInfo.budget_upper == undefined) {
                    tackInfo.budget_upper = '0.00';
                }
                if (tackInfo.durplusDay == undefined) {
                    tackInfo.durplusDay = '0';
                }

                html += "<div style=\"width: 100%;height: 20%;border: 1px solid #000000;\">"

                html += "<label>" + tackInfo.title + "</label>";

                if (tackInfo.task_order_id != null && tackInfo.task_order_id != "") {
                    html += "<label style='margin-left: 50; background-color: black;color: honeydew;'>置顶</label>";
                }

                html += "<label style='margin-left: 50;'>" + tackInfo.affiliatedPersonNum + "人参与</label>";
                html += "<br/>";
                html += "<label>" + tackInfo.description + "</label>";
                html += "<label style='margin-left: 50;font-size: 20pt;color: red;'>" + tackInfo.budget_lower + "元</label>";
                html += "<label>-</label>";
                html += "<label style='font-size: 20pt;color: red;'>" + tackInfo.budget_upper + "元</label>";
                html += "<label style='margin-left: 50;'>" + tackInfo.durplusDay + "天后截止</label>";

                html += "</div>";
            }
        return html;
    }

        /**
        * 图片模式
        * @param tackInfo
        * @returns {string}
        */
    function f_getImgStyle(data){

        var html = "";

        for(var i in data.list) {

            var tackInfo = data.list[i];

            if (tackInfo.budget_upper == undefined) {
                tackInfo.budget_upper = '0.00';
            }
            if (tackInfo.durplusDay == undefined) {
                tackInfo.durplusDay = '0';
            }

            html += "<table style=\"float: left;\">";
            html += "<tr>";
            html += "<td colspan=\"4\"><div style=\"width: 200px;height: 200px; border: 1px solid red;\">";
            html += "<img src='${path}" + tackInfo.task_pic + "' title='" + tackInfo.title + "' alt='" + tackInfo.title + "'style=\"width: 100%;height: 100%;\" />";
            html += "</div></td>";
            html += "</tr>";
            html += "<tr>";
            html += "<td colspan=\"4\" align=\"center\">" + tackInfo.title + "</td>";
            html += "</tr>";
            html += "<tr>";
            html += "<td></td>";
            html += "<td width=\"100\" style='color: red; font-size: 13pt;'>￥" + tackInfo.budget_upper + "元</td>";
            html += "<td>剩" + tackInfo.durplusDay + "天</td>";
            html += "</tr>";
            html += "</table>";
        }

        return html;
    }

    </script>
</head>
<body>
    <div style="width: 100%;height: 100%; border: 1px solid #FF2F2F;">
        <div style="width: 70%;height: 100%; border: 1px solid #f0ad4e; float: left;">
            <div style="width: 100%;height: 30%; border: 1px solid #eb9316;">
                <div id="projectDiv" style="width: 100%;height: 16%;  ">

                    <div style="width: 10%;height: 100%;  text-align: center;line-height: 26px;  float:left;"> <span style="margin-top: 10px;">项目分类：</span></div>
                    <div id="projectTypeDiv" style="width: 80%;height: 70%;line-height: 26px; overflow-y: hidden;  float:left;">  </div>
                    <div id="moreProjectDiv" style="width: 10%;height: 100%; line-height: 26px;  float:left;"><a id="moreProjectA" href="javascript:f_moreProjectType(this)" >更多》</a></div>
                    <div  class="floatDiv"></div>
                    <input type="hidden" id="first_class"><input type="hidden" id="second_class">
                </div>
                <div style="width: 100%;height: 16%;  ">

                    <div style="width: 10%;height: 100%;  text-align: center;  float:left;"> <span style="margin-top: 10px;">佣金区间：</span></div>
                    <div id="commissionDiv" style="width: 80%;height: 100%;   float:left;">
                        <span value="" class='spanClass'>全部</span><span value="0-1000">1000以下</span><span value="1000-5000">1000至5000</span>
                        <span value="10000-50000">10000至50000</span><span value="50000-999999999">50000以上</span>
                    </div>
                    <input type="hidden" id="budgetRegion">
                </div>
                <div style="width: 100%;height: 16%;  ">

                    <div style="width: 10%;height: 100%; text-align: center;  float:left;"> <span style="margin-top: 10px;">截止时间：</span></div>
                    <div id="demandTimeDiv" style="width: 80%;height: 100%;   float:left;">
                        <span value="" class='spanClass'>全部</span><span value="0-7">7天以内</span><span value="7-15">7至15天</span>
                        <span value="15-30">15至30天</span><span value="30-60">30至60天</span><span value="60-999999999">60天以上</span>
                    </div>
                    <input type="hidden" id="durplusDay">
                </div>
                <div style="width: 100%;height: 16%;  ">

                    <div style="width: 10%;height: 100%;  text-align: center;  float:left;"> <span style="margin-top: 10px;">客户信用：</span></div>
                    <div id="clientTypeDiv" style="width: 80%;height: 100%;  float:left;">
                        <span value="" class='spanClass'>全部</span><span value="">一星</span><span value="">二星</span><span value="">三星</span>
                        <span value="">四星</span><span value="">五星</span>
                    </div>
                    <input type="hidden" id="clientType">
                </div>
                <%--<div style="width: 100%;height: 16%;  ">--%>

                    <%--<div style="width: 10%;height: 100%;  text-align: center;  float:left;"> <span style="margin-top: 10px;">需求地区：</span></div>--%>
                    <%--<div id="demandAddsDiv" style="width: 80%;height: 100%;   float:left;">--%>
                        <%--<span value="" class='spanClass'>全部</span><span value="">中国</span><span value="">日本</span><span value="">北美</span>--%>
                    <%--</div>--%>
                    <%--<input type="hidden" id="demandAdds">--%>
                <%--</div>--%>
                <div style="width: 100%;height: 16%;  ">

                    <div style="width: 10%;height: 100%;  text-align: center;  float:left;"> <span style="margin-top: 10px;">当前状态：</span></div>
                    <div id="currentStateDiv" style="width: 80%;height: 100%;  float:left;">
                        <span value="">全部</span><span value="107102" class='spanClass'>进行中</span>
                        <span value="107105">已完成</span>
                    </div>

                    <input type="hidden" id="currentProgress" value="107102">
                </div>

            </div>
            <div style="width: 100%;height: 5%; border: 1px solid #adadad;">
                <table id="orderTable" style="height: 100%;width: 100%; " >
                    <tr>
                        <td class="spanClass" style="width: 10%" value="is_recom desc">按推荐排序</td>
                        <td style="width: 8%" value="publish_time desc">发布时间</td>
                        <td style="width: 8%" value="durplusDay">剩余时间</td>
                        <td style="width: 8%" value="affiliatedPersonNum desc">参与热度</td>
                        <td style="width: 8%" value="budget_upper desc">价格</td>
                        <td style="width: 5%" ><span onclick="f_changeType()" id="imgTypeSpan" style="border: 1px solid #000000; ">图片模式</span></td>
                        <td style="width: 10%"><input type="text" name="" id="title"> <input type="button" id="likeQuery" value="搜索"></td>
                    </tr>

                </table>
                <input id="orderBy" type="hidden" value="is_recom desc">
            </div>
            <div id="dataDiv" style="width: 100%;height: 55%; border: 1px solid #A7E2E7;">



            </div>
            <div style="width: 100%;height: 5%; border: 1px solid #adadad;"></div>
        </div>

        <div style="width: 28%;height: 100%; border: 1px solid #ffff00; float: left;">

            <div style="width: 100%;height: 15%; background-color: #adadad; text-align: center; margin:0 auto;">保障体系</div>
            <div style="width: 100%;height: 30%; border: 1px solid #adadad;"></div>
            <div style="width: 100%;height: 15%; border: 1px solid #A7E2E7;"></div>
            <div style="width: 100%;height: 5%; border: 1px solid #adadad;"></div>
            <div style="width: 100%;height: 25%; border: 1px solid #dbdbdb;"></div>
        </div>

    </div>
</body>
</html>
